<template>
  <swiper
      :modules="modules"
      :pagination="{ clickable: true }"
      direction="vertical"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>
      <swiper
          :modules="modules"
          slides-per-view="auto"
          :nested="true"
          :resistanceRatio="0"
          :freeMode="true"
          :mousewheel="{ releaseOnEdges: true }"
          :scrollbar="{ draggable: true, hide: true }"
          class="swiper-container2"
          direction="vertical"
      >
        <swiper-slide class="swiper-scrollbar123">
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
          <div>1231 </div>
        </swiper-slide>
      </swiper>
    </swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
  </swiper>
</template>
<script>
import {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  FreeMode,
  Mousewheel,
} from "swiper";


// Import Swiper Vue.js components
import {Swiper, SwiperSlide} from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination' // 轮播图底面的小圆点

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {
      modules: [Navigation, Pagination, Scrollbar, A11y, FreeMode, Mousewheel],
    };
  },
};
</script>

<style lang="less" scoped>
.swiper {
  width: 100vw;
  height: 100vh;
}
.swiper-scrollbar123 {
  min-height: 100vh;
  img {
    width: 100%;
    height: auto;
  }
}


.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-container2 .swiper-slide {
  font-size: 18px;
  height: auto;
  box-sizing: border-box;
  display: block;
  line-height: 100px;
  background: #4390ee;
  color: #fff;
}
.swiper-scrollbar {
  height: 150vh;
}
</style>
